<template>
	<view class="container">
		<top-back-navbar position="fixed" :title="pageTtile" background="#ffffff" color="#000000"></top-back-navbar>
		<view class="hd-top">
			<view class="hd-top-group">
				<view class="hd-top-list">
					<view class="text">我的资产</view>
					<view class="text">星期一</view>
					<view class="button button2">明细</view>
				</view>
				<view class="hd-top-list">
					<view class="text">¥ 10000</view>
					<view class="button button1">输入资产</view>
					<view class="button button1">确认</view>
				</view>
			</view>
		</view>
		<view class="aquarium hd-center">
			<view class="fishGroup" v-if="week>3">
				<view class="fish_wrap left_right_2">
					<view class="x">
						<view class="y">
							<view class="fish_box">
								<view class="fish_1"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="fish_wrap left_right_2">
					<view class="x">
						<view class="y">
							<view class="fish_box">
								<view class="fish_1"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="fish_wrap left_right_2">
					<view class="x">
						<view class="y">
							<view class="fish_box">
								<view class="fish_1"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="fish_wrap left_right_2">
					<view class="x">
						<view class="y">
							<view class="fish_box">
								<view class="fish_1"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="fishGroup" v-if="week>1">
				<view class="fish_wrap right_left_4">
					<view class="x">
						<view class="y">
							<view class="fish_box">
								<view class="fish_2"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="fish_wrap right_left_4">
					<view class="x">
						<view class="y">
							<view class="fish_box">
								<view class="fish_2"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="fish_wrap right_left_4">
					<view class="x">
						<view class="y">
							<view class="fish_box">
								<view class="fish_2"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="fish_wrap right_left_4">
					<view class="x">
						<view class="y">
							<view class="fish_box">
								<view class="fish_2"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="fishGroup" v-if="week>2">
				<view class="fish_wrap right_left_4">
					<view class="x">
						<view class="y">
							<view class="fish_box">
								<view class="fish_2"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="fish_wrap right_left_4">
					<view class="x">
						<view class="y">
							<view class="fish_box">
								<view class="fish_2"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="fish_wrap right_left_4">
					<view class="x">
						<view class="y">
							<view class="fish_box">
								<view class="fish_2"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="fish_wrap right_left_4">
					<view class="x">
						<view class="y">
							<view class="fish_box">
								<view class="fish_2"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="fishGroup" v-if="week>4">
				<view class="fish_wrap left_right_3">
					<view class="x">
						<view class="y">
							<view class="fish_box">
								<view class="fish_6"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="fish_wrap left_right_3">
					<view class="x">
						<view class="y">
							<view class="fish_box">
								<view class="fish_6"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="fishGroup" v-if="week>3">
				<view class="fish_wrap left_right_1">
					<view class="x">
						<view class="y">
							<view class="fish_box">
								<view class="fish_7"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="fish_wrap left_right_1">
					<view class="x">
						<view class="y">
							<view class="fish_box">
								<view class="fish_7"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="fish_wrap right_left_3">
				<view class="x">
					<view class="y">
						<view class="fish_box">
							<view class="fish_8"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="fish_wrap right_left_1">
				<view class="x">
					<view class="y">
						<view class="fish_box">
							<view class="fish_9"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="fish_wrap right_left_2">
				<view class="x">
					<view class="y">
						<view class="fish_box">
							<view class="fish_10"></view>
						</view>
					</view>
				</view>
			</view>
			<image mode="widthFix" class="hd-bottom-qiu" src="http://easycolor.juxingqiansheng.com/hd_img/qiu.png">
			</image>
			<image mode="widthFix" class="hd-bottom-chuan" src="http://easycolor.juxingqiansheng.com/hd_img/yc_bg.png">
			</image>
			<image mode="widthFix" class="hd-bottom-hc1" src="http://easycolor.juxingqiansheng.com/hd_img/hc2.png">
			</image>
			<image mode="widthFix" class="hd-bottom-hc2" src="http://easycolor.juxingqiansheng.com/hd_img/hc1.png">
			</image>
			<image mode="widthFix" v-if="week>3" class="hd-bottom-hc3" src="http://easycolor.juxingqiansheng.com/hd_img/hc3.png">
			</image>
			<view class="bubblewrap bubblewrap-left" v-if="week>3">
				<view class="bubbles b1 bubbles1"></view>
				<view class="bubbles b2 bubbles1"></view>
				<view class="bubbles b3 bubbles1"></view>
				<view class="bubbles b4 bubbles1"></view>
				<view class="bubbles b5 bubbles1"></view>
				<view class="bubbles b6 bubbles1"></view>
			</view>
			<view class="bubblewrap bubblewrap-right" v-if="week>4">
				<view class="bubbles b1 bubbles2"></view>
				<view class="bubbles b2 bubbles2"></view>
				<view class="bubbles b3 bubbles2"></view>
				<view class="bubbles b4 bubbles2"></view>
				<view class="bubbles b5 bubbles2"></view>
				<view class="bubbles b6 bubbles2"></view>
			</view>
		</view>
		<view class="hd-bottom">
			<image class="hd-bottom-footer" src="http://easycolor.juxingqiansheng.com/hd_img/footer.png"></image>
			<view class="hd-bottom-group">
				<view class="hd-bottom-group-text">
					<text>总量：10000万</text>
					<text>已投放：7000万</text>
					<text>剩余：300万</text>
				</view>
				<view class="hd-bottom-progress">
					<view class="bottom-progress-content"></view>
				</view>
			</view>
		</view>
		<view class="hd-top-box">
			<view class="hd-top-box-list">
				<view class="hd-top-box-item">
					<view class="hd-top-box-item-box hd-top-box-item-text">开始时间</view>
				</view>
				<view class="hd-top-box-item">
					<view class="hd-top-box-item-box hd-top-box-item-text">结束时间</view>
				</view>
				<view class="hd-top-box-item">
					<view class="hd-top-box-item-box hd-top-box-item-text">本场剩余时间</view>
				</view>
			</view>
			<view class="hd-top-box-list">
				<view class="hd-top-box-item">
					<view class="hd-top-box-item-box hd-top-box-item-button">
						<view class="hd-top-box-item-button-list">2022/11/23</view>
						<view class="hd-top-box-item-button-list">09:00:00</view>
					</view>
				</view>
				<view class="hd-top-box-item">
					<view class="hd-top-box-item-box hd-top-box-item-button">
						<view class="hd-top-box-item-button-list">2022/11/23</view>
						<view class="hd-top-box-item-button-list">09:00:00</view>
					</view>
				</view>
				<view class="hd-top-box-item">
					<view class="hd-top-box-item-box hd-top-box-item-button">
						<view class="hd-top-box-item-button-list">2022/11/23</view>
						<view class="hd-top-box-item-button-list">09:00:00</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTtile: '',
				pic_url: null,
				week:1
			};
		},
		onLoad(e) {
			console.log(e.week);
			this.week = e.week;
			if (e.week == 1) {
				this.pageTtile = '星期一';
			} else if (e.week == 2) {
				this.pageTtile = '星期二';
			} else if (e.week == 3) {
				this.pageTtile = '星期三';
			} else if (e.week == 4) {
				this.pageTtile = '星期四';
			} else if (e.week == 5) {
				this.pageTtile = '星期五';
			}
			// this.setajax()
		},
		methods: {
			setajax() {
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.get_pattern_pic&app=1&type=egg_pic',
					method: 'GET',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						this.pic_url = res.data && res.data.pic_url ? res.data.pic_url : null;
					},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style lang="less">
	page {
		background: #f3f6fb;
		height: 100%;
	}

	.container {
		height: 100%;
		background: url('/static/images/home/cj_home_bg1.png') center no-repeat;
		background-size: 100% 100%;
	}

	.hd-top {
		height: 13vh;
		padding:30rpx;
		position: relative;
		.hd-top-group{
			height: 100%;
			background: url('/static/images/home/cj_hd_top.png') center no-repeat;
			background-size: 100% 100%;
			padding:10rpx 100rpx;
			.hd-top-list{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 50%;
				.text{
					font-size: 36rpx;
					color:#fff;
				}
				.button{
					height: 50rpx;
					line-height: 50rpx;
					padding:0 30rpx;
					font-size: 32rpx;
					border-radius: 10rpx;
				}
				.button1{
					background-color: #83c1bb;
					color:#fff;
				}
				.button2{
					background-color: #fff;
					color:#83c1bb;
				}
			}
		}
	}
	.hd-top-box{
		position: absolute;
		top:19vh;
		padding:0 15rpx;
		width: 100%; 
		z-index: 300;
		.hd-top-box-list{ 
			display: flex;
			align-items: center;
			.hd-top-box-item{
				width: 33.33%;
				padding:0 15rpx;
				.hd-top-box-item-box{
					text-align: center;
				}
				.hd-top-box-item-text{
					color:#298d84;
					font-size: 32rpx;
					font-weight: bold;
				}
				.hd-top-box-item-button{
					background: url('/static/images/home/cj_top_list.png') center no-repeat;
					background-size: 100% 100%;
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					padding:14rpx 0;
					.hd-top-box-item-button-list{
						font-size: 28rx;
						height: 34rpx;
						line-height: 34rpx;
						text-align: center;
						color:#298d84;
					}
				}
			}
		}
	}

	.hd-center {
		height: 68vh;
		overflow: hidden;
		position: relative;

		.hd-bottom-qiu {
			position: absolute;
			bottom: -50rpx;
			width: 500rpx;
			left: 50%;
			margin-left: -250rpx;
		}

		.hd-bottom-chuan {
			position: absolute;
			bottom: -30rpx;
			width: 400rpx;
			left: 40%;
			animation: plant2-sway 10s infinite ease;
			z-index: 2;
		}

		.hd-bottom-hc1 {
			position: absolute;
			bottom: 10rpx;
			width: 150rpx;
			left: 4%;
			animation: plant3-sway 14.98s infinite ease;
		}

		.hd-bottom-hc2 {
			position: absolute;
			bottom: 10rpx;
			width: 150rpx;
			right: 3%;
			animation: plant3-sway 14.98s infinite ease;
		}

		.hd-bottom-hc3 {
			position: absolute;
			bottom: 10rpx;
			width: 350rpx;
			left: 0;
		}
	}

	.hd-bottom {
		height: 13vh;
		background-color: #005fa0;
		position: relative;
		padding-top: 30rpx;
		
		.hd-bottom-footer {
			position: absolute;
			top: -50rpx;
			left: 0;
			width: 120%;
			height: 80rpx;
			animation: runOne 10s linear infinite;
			z-index: 10;
		}
		.hd-bottom-group{
			height: 100%;
			padding:30rpx;
			.hd-bottom-group-text{
				font-size: 32rpx;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color:#fff;
			}
		}
		.hd-bottom-progress{
			margin-top:10rpx;
			background: url('/static/images/home/cj_progress.png') center no-repeat;
			background-size: 100% 100%;
			height: 50rpx;
			position: relative;
			.bottom-progress-content{
				position: absolute;
				top:0;
				left:0;
				width: 100%;
			}
		}
	}


	@keyframes plant2-sway {
		from {
			transform: rotate(-4deg);
		}

		50% {
			transform: rotate(6deg);
		}

		to {
			transform: rotate(-4deg);
		}
	}

	@keyframes plant3-sway {
		0% {
			transform: translateX(0);
		}

		50% {
			transform: translateX(30rpx);
		}

		100% {
			transform: translateX(0);
		}
	}

	@keyframes runOne {
		0% {
			left: 0;
		}

		50% {
			left: -20%;
		}

		100% {
			left: 0%;
		}
	}

	.fish_box {
		display: inline-block;
	}

	.fishGroup .fish_wrap:nth-child(2) .fish_box {
		-webkit-transform: translate(-100%, -50%);
		transform: translate(-100%, -50%);
	}

	.fishGroup .fish_wrap:nth-child(3) .fish_box {
		-webkit-transform: translate(-150%, 25%);
		transform: translate(-150%, 25%);
	}

	.fishGroup .fish_wrap:nth-child(4) .fish_box {
		-webkit-transform: translate(-250%, 65%);
		transform: translate(-200%, 65%);
	}

	.fishGroup .fish_wrap:nth-child(5) .fish_box {
		-webkit-transform: translate(-320%, -25%);
		transform: translate(-320%, -25%);
	}

	.left_right_1 {
		position: absolute;
		width: 100%;
		height: 70%;
	}

	.left_right_1 .x {
		display: inline-block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		-webkit-animation: left_right_1_x 70s linear infinite;
		animation: left_right_1_x 70s linear infinite;
	}

	@-webkit-keyframes left_right_1_x {
		0% {
			left: 0%;
		}

		100% {
			left: 150%;
		}
	}

	.left_right_1 .y {
		display: inline-block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		-webkit-animation: left_right_1_y 1.5s ease infinite;
		animation: left_right_1_y 1.5s ease infinite;
	}

	@-webkit-keyframes left_right_1_y {
		0% {
			top: 45%;
		}

		30% {
			top: 46%;
		}

		50% {
			top: 45%;
		}

		70% {
			top: 46%;
		}

		100% {
			top: 45%;
		}
	}

	.left_right_2 {
		position: absolute;
		width: 100%;
		height: 70%;
	}

	.left_right_2 .x {
		display: inline-block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		-webkit-animation: left_right_2_x 25s linear infinite;
		animation: left_right_2_x 25s linear infinite;
	}

	@-webkit-keyframes left_right_2_x {
		0% {
			left: 0%;
		}

		100% {
			left: 150%;
		}
	}

	.left_right_2 .y {
		display: inline-block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		-webkit-animation: left_right_2_y 25s ease-in-out infinite;
		animation: left_right_2_y 25s ease-in-out infinite;
	}

	@-webkit-keyframes left_right_2_y {
		0% {
			top: 25%;
			-webkit-transform: rotateZ(0deg);
			transform: rotateZ(0deg);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}

		25% {
			-webkit-transform: rotateZ(-20deg);
			transform: rotateZ(-20deg);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}

		50% {
			top: 0%;
		}

		75% {
			-webkit-transform: rotateZ(10deg);
			transform: rotateZ(10deg);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}

		100% {
			top: 50%;
			-webkit-transform: rotateZ(10deg);
			transform: rotateZ(10deg);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}
	}

	.left_right_3 {
		position: absolute;
		width: 100%;
		height: 70%;
	}

	.left_right_3 .x {
		display: inline-block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		-webkit-animation: left_right_3_x 60s linear infinite;
		animation: left_right_3_x 60s linear infinite;
	}

	@-webkit-keyframes left_right_3_x {
		0% {
			left: 0%;
		}

		100% {
			left: 150%;
		}
	}

	.left_right_3 .y {
		display: inline-block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		-webkit-animation: left_right_3_y 60s ease-in-out infinite;
		animation: left_right_3_y 60s ease-in-out infinite;
	}

	@-webkit-keyframes left_right_3_y {
		0% {
		 top: 50%;
		 -webkit-transform: rotateZ(0deg);
			transform: rotateZ(0deg);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}

		25% {
			top: 80%;
			-webkit-transform: rotateZ(40deg);
			transform: rotateZ(40deg);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}

		38% {
			top: 80%;
			-webkit-transform: rotateZ(0deg);
			transform: rotateZ(0deg);
		}

		50% {
			top: 80%;
			-webkit-transform: rotateZ(0deg);
			transform: rotateZ(0deg);
		}

		75% {
			-webkit-transform: rotateZ(40deg);
			transform: rotateZ(40deg);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}

		100% {
			top: 25%;
			-webkit-transform: rotateZ(0deg);
			transform: rotateZ(0deg);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}
	}

	.right_left_1 {
		position: absolute;
		width: 100%;
		height: 100%;
		transforM: scaleX(-1);
	}

	.right_left_1 .x {
		display: inline-block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 70%;
		-webkit-animation: right_left_1_x 25s linear infinite;
		animation: right_left_1_x 25s linear infinite;
	}

	@-webkit-keyframes right_left_1_x {
		0% {
			left: 0%;
		}

		100% {
			left: 150%;
		}
	}

	.right_left_1 .y {
		display: inline-block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		-webkit-animation: right_left_1_y 25s ease-in-out infinite;
		animation: right_left_1_y 25s ease-in-out infinite;
	}

	@-webkit-keyframes right_left_1_y {
		0% {
			top: 75%;
		}

		100% {
			top: 75%;
		}
	}

	.right_left_2 {
		position: absolute;
		width: 100%;
		height: 70%;
		transforM: scaleX(-1);
	}

	.right_left_2 .x {
		display: inline-block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 70%;
		-webkit-animation: right_left_2_x 30s linear infinite;
		animation: right_left_2_x 30s linear infinite;
	}

	@-webkit-keyframes right_left_2_x {
		0% {
			left: 0%;
		}

		100% {
			left: 100%;
		}
	}

	.right_left_2 .y {
		display: inline-block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		-webkit-animation: right_left_2_y 30s ease-in-out infinite;
		animation: right_left_2_y 30s ease-in-out infinite;
	}

	@-webkit-keyframes right_left_2_y {
		0% {
			top: 100%;
			-webkit-transform: rotateZ(0deg);
			transform: rotateZ(0deg);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}

		25% {
			-webkit-transform: rotateZ(-20deg);
			transform: rotateZ(-20deg);
			-webkit-transform-origin: 0% 0%;
		 transform-origin: 0% 0%;
		}

		50% {
			top: 0%;
		}

		75% {
			-webkit-transform: rotateZ(20deg);
			transform: rotateZ(20deg);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}

		100% {
			top: 100%;
			-webkit-transform: rotateZ(90deg);
			transform: rotateZ(90deg);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}
	}

	.right_left_3 {
		position: absolute;
		width: 100%;
		height: 50%;
		transforM: scaleX(-1);
	}

	.right_left_3 .x {
		display: inline-block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		-webkit-animation: right_left_3_x 35s linear infinite;
		animation: right_left_3_x 35s linear infinite;
	}

	@-webkit-keyframes right_left_3_x {
		0% {
			left: 0%;
		}

		100% {
			left: 100%;
		}
	}

	.right_left_3 .y {
		display: inline-block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		-webkit-animation: right_left_3_y 35s ease-in-out infinite;
		animation: right_left_3_y 35s ease-in-out infinite;
	}

	@-webkit-keyframes right_left_3_y {
		0% {
			top: 50%;
			-webkit-transform: rotateZ(0deg);
			transform: rotateZ(0deg);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}

		25% {
			-webkit-transform: rotateZ(20deg);
			transform: rotateZ(20deg);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}

		50% {
			top: 90%;
		}

		75% {
		 -webkit-transform: rotateZ(-20deg);
			transform: rotateZ(-20deg);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}

		100% {
			top: 50%;
			-webkit-transform: rotateZ(-50deg);
			transform: rotateZ(-50deg);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}
	}

	.right_left_4 {
		position: absolute;
		width: 100%;
		height: 70%;
		transforM: scaleX(-1);
	}

	.right_left_4 .x {
		display: inline-block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		-webkit-animation: right_left_4_x 50s linear infinite;
		animation: right_left_4_x 50s linear infinite;
	}

	@-webkit-keyframes right_left_4_x {
		0% {
			left: 0%;
		}

		100% {
			left: 100%;
		}
	}

	.right_left_4 .y {
		display: inline-block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		-webkit-animation: right_left_4_y 50s ease-in-out infinite;
		animation: right_left_4_y 50s ease-in-out infinite;
	}

	@-webkit-keyframes right_left_4_y {
		0% {
			top: 50%;
			-webkit-transform: rotateZ(0deg);
			transform: rotateZ(0deg);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}

		25% {
			-webkit-transform: rotateZ(20deg);
			transform: rotateZ(20deg);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}

		50% {
			top: 90%;
		}

		75% {
			-webkit-transform: rotateZ(-20deg);
			transform: rotateZ(-20deg);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}

		100% {
			top: 50%;
			-webkit-transform: rotateZ(0deg);
			transform: rotateZ(0deg);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}
	}

	.fish_1 {
		background: url(http://easycolor.juxingqiansheng.com/hd_img/fish1.png) no-repeat 0 0;
		width: 55px;
		height: 37px;
		-webkit-animation: fish_1_play 0.5s steps(4) infinite;
		animation: fish_1_play 0.5s steps(4) infinite;
	}

	@-webkit-keyframes fish_1_play {
		0% {
			background-position: 0 0
		}

		100% {
			background-position: 0 -148px
		}
	}

	.fish_2 {
		background: url(http://easycolor.juxingqiansheng.com/hd_img/fish2.png) no-repeat 0 0;
		width: 78px;
		height: 64px;
		-webkit-animation: fish_2_play 0.5s steps(4) infinite;
		animation: fish_2_play 0.5s steps(4) infinite;
	}

	@-webkit-keyframes fish_2_play {
		0% {
			background-position: 0 0
		}

		100% {
			background-position: 0 -256px
		}
	}

	.fish_6 {
		background: url(http://easycolor.juxingqiansheng.com/hd_img/fish6.png) no-repeat 0 0;
		width: 105px;
		height: 79px;
		-webkit-animation: fish_6_play 1.5s steps(8) infinite;
		animation: fish_6_play 1.5s steps(8) infinite;
	}

	@-webkit-keyframes fish_6_play {
		0% {
			background-position: 0 0
		}

		100% {
			background-position: 0 -632px
		}
	}

	.fish_7 {
		background: url(http://easycolor.juxingqiansheng.com/hd_img/fish7.png) no-repeat 0 0;
		width: 92px;
		height: 151px;
		-webkit-animation: fish_7_play 1s steps(6) infinite;
		animation: fish_7_play 1s steps(6) infinite;
	}

	@-webkit-keyframes fish_7_play {
		0% {
			background-position: 0 0
		}

		100% {
			background-position: 0 -906px
		}
	}

	.fish_8 {
		background: url(http://easycolor.juxingqiansheng.com/hd_img/fish8.png) no-repeat 0 0;
		width: 174px;
		height: 126px;
		-webkit-animation: fish_8_play 1s steps(8) infinite;
		animation: fish_8_play 1s steps(8) infinite;
	}

	@-webkit-keyframes fish_8_play {
		0% {
			background-position: 0 0
		}

		100% {
			background-position: 0 -1008px
		}
	}

	.fish_9 {
		background: url(http://easycolor.juxingqiansheng.com/hd_img/fish9.png) no-repeat 0 0;
		width: 166rpx;
		background-size: 100% auto;
	}

	@-webkit-keyframes fish_9_play {
		0% {
			background-position: 0 0
		}

		100% {
			background-position: 0 -1464px
		}
	}

	.fish_10 {
		background: url(http://easycolor.juxingqiansheng.com/hd_img/fish10.png) no-repeat 0 0;
		width: 178px;
		height: 187px;
		-webkit-animation: fish_10_play 1s steps(6) infinite;
		animation: fish_10_play 1s steps(6) infinite;
	}

	@-webkit-keyframes fish_10_play {
		0% {
			background-position: 0 0
		}

		100% {
			background-position: 0 -1122px
		}
	}


	/* bubbles */
	.bubblewrap-left{
		left: 0;
	}
	.bubblewrap-right{
		right: 0;
	}
	.bubblewrap {
		height: 500rpx;
		position: absolute;
		bottom: 0px;
		width: 200rpx;
		z-index: 1;

		.b1 {
			animation: bubblerise 4s 2s linear infinite;
		}

		.b2 {
			animation: bubblerise 7s linear infinite
		}

		.b3 {
			left: 50rpx;
			bottom: 0rpx;
			animation: bubblerise 4s linear 1s infinite
		}

		.b4 {
			left: 60rpx;
			bottom: 0rpx;
			animation: bubblerise 5s linear 3s infinite
		}

		.b5 {
			left: 80rpx;
			bottom: 0rpx;
			animation: bubblerise 6s linear infinite
		}

		.b6 {
			left: 90rpx;
			bottom: 0rpx;
			animation: bubblerise 5s linear infinite
		}
	}
	.bubbles1{
		background: url(http://easycolor.juxingqiansheng.com/hd_img/qp1.png) no-repeat 0 0;
		background-size: cover;
	}
	.bubbles2{
		background: url(http://easycolor.juxingqiansheng.com/hd_img/qp2.png) no-repeat 0 0;
		background-size: cover;
	}
	.bubbles {
		
		border-radius: 50%;
		height: 20rpx;
		width: 20rpx;
		position: absolute;
		left: 33rpx;
		bottom:0;
	}

	@keyframes bubblerise {
		from {
			top: 380rpx;
		}

		to {
			top: 0px;
		}
	}
</style>
